<template>
    <el-form ref="form" :model="curData" label-width="100px" :rules="rules" status-icon :inline="true">
        <el-form-item label="角色:" prop="roleIds">
            <el-select v-model="curData.roleIds" placeholder="请选择角色" size="small" multiple filterable>
                <el-option v-for="(item,index) in roleByTypes" :label="item.label" :value="item.value"
                           :key="index"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item class="formBtn">
            <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import edtiMixin from '@/mixins/edit.mixin'
    import {mapState, mapActions} from 'vuex'

    export default {
        mixins: [edtiMixin],
        data() {
            return {
                rules: {
                    roleIds: [
                        {required: true, message: '请选择角色信息', trigger: ['change']}
                    ]
                },
                editApi: this.$api.system.user.toRoles,
                curData: {
                    roleIds: []
                }
            }
        },
        computed: {
            ...mapState('basic', ['roleByTypes'])
        },
        methods: {
            ...mapActions('basic', ['doRoleByTypeOfBasic']),
            // 获取用户所拥有的角色
            doUserOfRoles() {
                this.$ajax.get(this.$api.system.user.ofRoles, {id: this.curData.id}).then(result => {
                    this.curData.roleIds = [...result.bean];
                });
            },
            initDatas() {
                this.doRoleByTypeOfBasic(this.curData.type).then(result => {
                    this.doUserOfRoles();
                });
            }
        },
        mounted() {
            this.initDatas();
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/common.less";
</style>
